<template>
  <div class="map-container" :style="{height: height+'px'}">
    <div v-if="isShow" style="font-size:20px;">经度：{{ lng }}，纬度：{{ lat }}</div>
    <div id="map" ref="container" class="amap"/>
    <div v-if="isEdit" class="tipWrapper">
      <el-input id="keyword" v-model="keyword" placeholder="输入地点" style="width:200px;"/>
    </div>
    <div v-if="isEdit" style="float:right;">
      <el-button size="small" @click="close()">取 消</el-button>
      <el-button size="small" type="primary" @click="updateLngLat()">确 定</el-button>
    </div>

  </div>

</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import {amapKey} from '@/settings'
import crudProject from '@/api/project/list'

export default {
  name: "AMap",
  props: {

    height: "",
    dialogVisible: Boolean,
    isEdit: {
      type: Boolean,
      default: true
    },
    isShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      map: null,
      keyword: '',
      lng: '',
      lat: '',
      marker: null,
      lnglats: [

      ],
      projectName:[],
      projectIds:[]
    }
  },
  beforeCreate() {
    AMapLoader.load({
      "key": amapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
      "version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      "plugins": ['AMap.PlaceSearch', 'AMap.AutoComplete'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      "AMapUI": { // 是否加载 AMapUI，缺省不加载
        version: '1.1',
        "plugins": []// 需要加载的 AMapUI ui插件
      },

    }).then(AMap => {
      this.initMap(AMap);
      this.mapSearch(AMap);
    }).catch(e => {
      console.error(e);
    })
  },
  methods: {
    initMap(AMap) {
      // this.map = new AMap.Map("container");
      // 或者使用 $refs 获取节点
      const self = this;
      const $map = this.$refs.container;
      crudProject.getFollowList().then((res) => {
        console.log(res)
        for (var i = 0; i < res.data.list.length; i++) {
          self.lnglats.push([JSON.parse(res.data.list[i].longitude),JSON.parse(res.data.list[i].latitude)])
          self.projectName.push(res.data.list[i].projectName)
          self.projectIds.push(res.data.list[i].projectId)
        }
        console.log(self.lnglats)
        this.map = new AMap.Map(
          $map, {
            center: [this.initLng ? this.initLng : 120.130414, this.initLat ? this.initLat : 31.458027],
            zoom: 6
          });
        for (var i = 0; i < self.lnglats.length; i++) {
          self.marker = new AMap.Marker({
            position: self.lnglats[i],
            map: self.map
          })
          self.marker.setLabel({
            offset: new AMap.Pixel(10, -10),
            content: `<a href="/project/list/detail/${self.projectIds[i]}">${self.projectName[i]}</a>`
          });

        }
      }).catch(err => {

      })

    },
    mapSearch(AMap) {
      // //输入提示
      var autoOptions = {
        input: "keyword",
        city: "太仓"
      };

      var auto = new AMap.AutoComplete(autoOptions);
      var placeSearch = new AMap.PlaceSearch({
        city: '太仓',
        map: this.map
      }); // 构造地点查询类
      auto.on("select", select);// 注册监听，当选中某条记录时会触发
      function select(e) {
        // placeSearch.setCity(e.poi.adcode);
        placeSearch.search(e.poi.name); // 关键字查询查询
      }

      // AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function() {
      //   var autoOptions = {
      //     city: "北京", //城市，默认全国
      //     input: "keyword"//使用联想输入的input的id
      //   };
      //   var autocomplete= new AMap.Autocomplete(autoOptions);
      //
      // });
    },
    close() {
      this.$emit('update:dialogVisible', false);
    },
    updateLngLat() {
      const self = this;
      this.$emit('updateLngLat', self.lng, self.lat);
      this.$emit('update:dialogVisible', false);
    }

  }
}

</script>

<style scoped>
.map-container {
  width: 100%;
  height: 450px;
  position: relative;
}

.tipWrapper {
  position: absolute;
  top: 40px;
  right: 10px;
}

.amap {
  width: 100%;
  height: calc(100% - 70px);
  margin-bottom: 10px;
}

.amap-sug-result {
  z-index: 2100;
}
/*.amap-marker-label{*/
/*  border: 0;*/
/*  background-color: transparent;*/

/*}*/
</style>
